<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true" style="margin-bottom: 10px">添加用户</el-button>
    <el-button type="primary" @click="searchUser" style="margin-bottom: 10px">搜索用户</el-button>
    <el-input v-model="input" placeholder="请输入内容" style="margin: 10px;width: 200px"></el-input>
    <el-table
        :data="tableData"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="ID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="account"
          label="账号"
          width="120">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          width="120">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          width="180">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120"
      >
          <el-button @click="handleClick" type="text" size="small">删除</el-button>
          <el-button type="text" size="small" @click="handleEdit">编辑</el-button>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        background
        small
        layout="prev, pager, next, jumper"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        @current-change="handlePageChange"
        style="margin-top: 20px; text-align: right;">
    </el-pagination>
    <!--添加用户界面-->
    <el-dialog title="添加用户" :visible.sync="dialogVisible">
      <el-form :model="newUser" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="newUser.name"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="newUser.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="newUser.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="newUser.age" type="number"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="newUser.email"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitNewUser">确 定</el-button>
      </template>
    </el-dialog>

    <!-- 编辑用户弹窗 -->
    <el-dialog title="编辑用户" :visible.sync="editDialogVisible">
      <el-form :model="editUser" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="editUser.name"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="editUser.account"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="editUser.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="editUser.age" type="number"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="editUser.email"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitEditUser">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      input: '',
      tableData: [],
      dialogVisible: false,
      newUser: {
        name: '',
        account: '',
        password: '',
        age: null,
        email: ''
      },
      editDialogVisible: false,
      editUser: {
        id: null,
        name: '',
        account: '',
        password: '',
        age: null,
        email: ''
      },
      // 分页相关
      pageNum: 1,
      pageSize: 5,
      total: 0,
    }
  },

  methods: {
    fetchUsers() {
      request({
        url: '/user/page',
        method: 'get',
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        }
      }).then(response => {
        // 后端返回 IPage<User>，含 records 和 total
        this.tableData = response.data.records
        this.total = response.data.total
      })
    },

    handlePageChange(newPage) {
      this.pageNum = newPage
      this.fetchUsers()
    },
    // 搜索用户
    searchUser() {
      request({
        url: '/user/query',
        method: 'get',
        params: { name: this.input || '' }
      }).then(response => {
        this.tableData = response.data
      }).catch(() => {
        this.$message.error('查询失败')
      })
    },
    //删除用户
    handleClick(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request({
          url: `/user/delete/${row.id}`,
          method: 'delete'
        }).then(() => {
          this.$message.success('删除成功')
          this.fetchUsers()
        }).catch(() => {
          this.$message.error('删除失败')
        })
      }).catch(() => {
        // 用户取消
      })
    },
    handleEdit(row) {
      this.editUser = { ...row }
      this.editDialogVisible = true
    },

    submitEditUser() {
      request({
        url: '/user/update',
        method: 'put',
        data: this.editUser
      }).then(() => {
        this.editDialogVisible = false
        this.fetchUsers()
        this.$message.success('修改成功')
      }).catch(() => {
        this.$message.error('修改失败')
      })
    },

    fetchAllUsers() {
      request({
        url: '/user/list',
        method: 'get'
      }).then(response => {
        this.tableData = response.data
      })
    },

    submitNewUser() {
      request({
        url: '/user/add',
        method: 'post',
        data: this.newUser
      }).then(() => {
        this.dialogVisible = false
        this.fetchUsers()
        this.$message.success('添加成功')
        this.newUser = { name: '', account: '', password: '', age: null, email: '' }
      }).catch(() => {
        this.$message.error('添加失败')
      })
    }
  },

  created() {
    this.fetchUsers()
  }
}
</script>